<template>
  <div class="category-list-container">
    <!-- Header -->
    <div class="filter-header" @click="toggleExpanded">
      <div class="header-left">
        <h3 class="filter-title">
          <i class="fas fa-filter"></i>
          筛选条件
        </h3>
        <span v-if="!isExpanded && hasActiveFilters" class="active-count">
          {{ activeFiltersCount }} 个筛选条件
        </span>
      </div>
      <div class="header-right">
        <button v-if="isExpanded" class="clear-all-btn" @click.stop="clearAllFilters">
          <i class="fas fa-times"></i>
          清空筛选
        </button>
        <button class="expand-btn">
          <i :class="['fas', isExpanded ? 'fa-chevron-up' : 'fa-chevron-down']"></i>
          {{ isExpanded ? '收起' : '展开' }}
        </button>
      </div>
    </div>

    <!-- Collapsed State - Show Active Filters Only -->
    <div v-if="!isExpanded && hasActiveFilters" class="collapsed-filters">
      <div class="active-filter-tags">
        <span v-if="filterValue.templateStyle" class="active-filter-tag">
          风格: {{ getStyleLabel(filterValue.templateStyle) }}
          <i class="fas fa-times" @click="filterValue.templateStyle = ''"></i>
        </span>
        <span v-if="filterValue.templateUse" class="active-filter-tag">
          用途: {{ filterValue.templateUse }}
          <i class="fas fa-times" @click="filterValue.templateUse = ''"></i>
        </span>
        <span v-if="filterValue.templateIndustry" class="active-filter-tag">
          行业: {{ filterValue.templateIndustry }}
          <i class="fas fa-times" @click="templateIndustryClick"></i>
        </span>
        <span v-if="filterValue.templatePost" class="active-filter-tag">
          职业: {{ filterValue.templatePost }}
          <i class="fas fa-times" @click="filterValue.templatePost = ''"></i>
        </span>
      </div>
    </div>

    <!-- Expanded State - Full Filter Categories -->
    <transition name="expand">
      <div v-if="isExpanded" class="category-list-box">
        <!-- 模版风格 -->
        <div class="list-item-box">
          <div class="category-header">
            <i class="fas fa-palette category-icon"></i>
            <span class="category-label">风格</span>
          </div>
          <div class="filter-content">
            <span
                :class="['filter-tag all-tag', { active: !filterValue.templateStyle }]"
                @click="filterValue.templateStyle = ''"
            >
              全部
            </span>
            <span
                v-for="(item, index) in categoryList"
                :key="index"
                :class="['filter-tag', { active: filterValue.templateStyle === item.value }]"
                @click="handleSelectStyle(item)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>

        <!-- 简历用途 -->
        <div class="list-item-box">
          <div class="category-header">
            <i class="fas fa-briefcase category-icon"></i>
            <span class="category-label">用途</span>
          </div>
          <div class="filter-content">
            <span
                :class="['filter-tag all-tag', { active: !filterValue.templateUse }]"
                @click="filterValue.templateUse = ''"
            >
              全部
            </span>
            <span
                v-for="(item, index) in templateUseList"
                :key="index"
                :class="['filter-tag', { active: filterValue.templateUse === item.label }]"
                @click="handleSelectUse(item)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>

        <!-- 简历行业 -->
        <div class="list-item-box">
          <div class="category-header">
            <i class="fas fa-industry category-icon"></i>
            <span class="category-label">行业</span>
          </div>
          <div class="filter-content">
            <span
                :class="['filter-tag all-tag', { active: !filterValue.templateIndustry }]"
                @click="templateIndustryClick"
            >
              全部
            </span>
            <span
                v-for="(item, index) in templateIndustryList"
                :key="index"
                :class="['filter-tag', { active: filterValue.templateIndustry === item.label }]"
                @click="handleSelectIndustry(item)"
            >
              {{ item.label }}
            </span>
          </div>
        </div>

        <!-- 具体职业 -->
        <div class="list-item-box">
          <div class="category-header">
            <i class="fas fa-user-tie category-icon"></i>
            <span class="category-label">职业</span>
          </div>
          <div class="filter-content">
            <span
                :class="['filter-tag all-tag', { active: !filterValue.templatePost }]"
                @click="filterValue.templatePost = ''"
            >
              全部
            </span>
            <span
                v-for="(item, index) in templatePostListCP"
                :key="index"
                :class="['filter-tag', { active: filterValue.templatePost === item }]"
                @click="handleSelectTemplatePost(item)"
            >
              {{ item }}
            </span>
          </div>
        </div>
      </div>
    </transition>
  </div>
</template>

<script setup lang="ts">
import {
  templateUseList,
  templateIndustryList,
  templatePostList
} from '@/dictionary/createTemplate';
import { deleteNull } from '@/utils/common';
import {getTemplateStyleList} from "@/http/m_api/template";
import {ElMessage} from "element-plus";
import { reactive, ref, computed, watch, onMounted } from 'vue';
import { useRoute, useRouter } from 'vue-router';

const emit = defineEmits(['categoryChange']);

// 展开/收起状态
const isExpanded = ref(false);

// 初始化筛选
const route = useRoute();
const router = useRouter();

// 查询模版风格
const categoryList = ref<any>([]);
const filterValue = reactive<any>({
  templateStyle: '',
  templateUse: '',
  templateIndustry: '',
  templatePost: ''
});

const getCategoryList = async () => {
  const data = await getTemplateStyleList();
  if (!data.code) {
    categoryList.value = data.data.map(
        (item: { id: string; label: string }) => {
          return {
            label: item.label,
            value: item.id
          };
        }
    );
  } else {
    ElMessage.error(data.message);
  }
};

onMounted(() => {
  getCategoryList();
})

const { templateStyle, templateUse, templateIndustry, templatePost } = route.query;
filterValue.templateStyle = templateStyle || '';
filterValue.templateUse = templateUse;
filterValue.templateIndustry = templateIndustry;
filterValue.templatePost = templatePost;

// 简历具体职业
const defaultIndustryList = ref<any>([
  '前端开发',
  '广告设计',
  '内容运营',
  '产品经理',
  '新媒体运营'
]);
const templatePostListCP = computed(() => {
  if (filterValue.templateIndustry) {
    const filter: any = templatePostList.find(
        (item: any) => item.title === filterValue.templateIndustry
    );
    return filter.job;
  } else {
    return defaultIndustryList.value;
  }
});

// 选择模版风格
const handleSelectStyle = (item: any) => {
  filterValue.templateStyle = item.value;
};

// 选择简历用途
const handleSelectUse = (item: any) => {
  filterValue.templateUse = item.label;
};

// 选择简历行业
const handleSelectIndustry = (item: any) => {
  filterValue.templatePost = '';
  filterValue.templateIndustry = item.label;
};

// 点击行业
const templateIndustryClick = () => {
  filterValue.templatePost = '';
  filterValue.templateIndustry = '';
};

// 选择职业
const handleSelectTemplatePost = (item: any) => {
  filterValue.templatePost = item;
};

// 清空所有筛选
const clearAllFilters = () => {
  filterValue.templateStyle = '';
  filterValue.templateUse = '';
  filterValue.templateIndustry = '';
  filterValue.templatePost = '';
};

// 切换展开/收起
const toggleExpanded = () => {
  isExpanded.value = !isExpanded.value;
};

// 检查是否有活跃的筛选条件
const hasActiveFilters = computed(() => {
  return filterValue.templateStyle || filterValue.templateUse ||
      filterValue.templateIndustry || filterValue.templatePost;
});

// 活跃筛选条件数量
const activeFiltersCount = computed(() => {
  let count = 0;
  if (filterValue.templateStyle) count++;
  if (filterValue.templateUse) count++;
  if (filterValue.templateIndustry) count++;
  if (filterValue.templatePost) count++;
  return count;
});

// 获取风格标签
const getStyleLabel = (value: string) => {
  const style = categoryList.value.find((item: any) => item.value === value);
  return style ? style.label : value;
};

watch(
    () => filterValue,
    () => {
      updateRouter();
      emit('categoryChange');
    },
    { deep: true }
);

// 更新路由
const updateRouter = () => {
  // 重置路由
  router.replace({
    path: route.path,
    query: {
      ...deleteNull(filterValue)
    }
  });
};

defineExpose({
  filterValue
});
</script>

<style lang="scss" scoped>
@import 'https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css';



.category-list-container {
  position: sticky;
  top: 80px;
  z-index: 10;
  background: rgba(52, 73, 94, 0.95);
  backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  margin: 20px 0;
  overflow: hidden;
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
  animation: slideInDown 0.5s ease-out;
  transition: all 0.3s ease;
}

.filter-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 15px 25px;
  background: rgba(100, 181, 246, 0.1);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
  cursor: pointer;
  transition: all 0.3s ease;

  &:hover {
    background: rgba(100, 181, 246, 0.15);
  }

  .header-left {
    display: flex;
    align-items: center;
    gap: 15px;

    .filter-title {
      color: #ffffff;
      font-size: 1.1rem;
      font-weight: 600;
      margin: 0;
      display: flex;
      align-items: center;
      gap: 10px;

      i {
        color: #64b5f6;
        font-size: 1rem;
      }
    }

    .active-count {
      background: rgba(46, 204, 113, 0.2);
      color: #2ecc71;
      padding: 4px 10px;
      border-radius: 12px;
      font-size: 0.8rem;
      font-weight: 500;
    }
  }

  .header-right {
    display: flex;
    align-items: center;
    gap: 10px;

    .clear-all-btn {
      background: rgba(231, 76, 60, 0.1);
      color: #e74c3c;
      border: 1px solid rgba(231, 76, 60, 0.3);
      border-radius: 15px;
      padding: 4px 10px;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 4px;

      &:hover {
        background: rgba(231, 76, 60, 0.2);
        transform: translateY(-1px);
      }

      i {
        font-size: 0.7rem;
      }
    }

    .expand-btn {
      background: rgba(255, 255, 255, 0.1);
      color: #ffffff;
      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 15px;
      padding: 4px 10px;
      font-size: 0.8rem;
      cursor: pointer;
      transition: all 0.3s ease;
      display: flex;
      align-items: center;
      gap: 4px;

      &:hover {
        background: rgba(255, 255, 255, 0.15);
        color: #64b5f6;
      }

      i {
        font-size: 0.7rem;
        transition: transform 0.3s ease;
      }
    }
  }
}

.collapsed-filters {
  padding: 15px 25px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  .active-filter-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
  }

  .active-filter-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    background: rgba(100, 181, 246, 0.2);
    color: #ffffff;
    border: 1px solid rgba(100, 181, 246, 0.4);
    border-radius: 12px;
    font-size: 0.8rem;
    font-weight: 500;

    i {
      cursor: pointer;
      padding: 2px;
      border-radius: 50%;
      transition: all 0.2s ease;

      &:hover {
        background: rgba(255, 255, 255, 0.2);
        color: #e74c3c;
      }
    }
  }
}

.category-list-box {
  padding: 20px 25px;
}

.list-item-box {
  margin-bottom: 20px;

  &:last-child {
    margin-bottom: 0;
  }
}

.category-header {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);

  .category-icon {
    color: #64b5f6;
    font-size: 0.9rem;
    margin-right: 8px;
    width: 16px;
    text-align: center;
  }

  .category-label {
    color: #ffffff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 1px;
  }
}

.filter-content {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.filter-tag {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 12px;
  background: rgba(255, 255, 255, 0.05);
  color: #f5f5f5;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 15px;
  font-size: 0.85rem;
  cursor: pointer;
  transition: all 0.3s ease;
  user-select: none;
  position: relative;
  overflow: hidden;

  &::before {
    content: '';
    position: absolute;
    top: 0;
    left: -100%;
    width: 100%;
    height: 100%;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    transition: left 0.5s ease;
  }

  &:hover {
    background: rgba(100, 181, 246, 0.1);
    border-color: rgba(100, 181, 246, 0.3);
    color: #ffffff;
    transform: translateY(-1px);

    &::before {
      left: 100%;
    }
  }

  &.active {
    background: linear-gradient(135deg, #64b5f6, #42a5f5);
    border-color: #64b5f6;
    color: #ffffff;
    font-weight: 500;
    box-shadow: 0 2px 8px rgba(100, 181, 246, 0.3);
  }

  &.all-tag {
    background: rgba(46, 204, 113, 0.1);
    border-color: rgba(46, 204, 113, 0.3);
    color: #2ecc71;

    &:hover {
      background: rgba(46, 204, 113, 0.2);
      color: #ffffff;
    }

    &.active {
      background: linear-gradient(135deg, #2ecc71, #27ae60);
      border-color: #2ecc71;
      color: #ffffff;
    }
  }
}

// Expand/Collapse Animation
.expand-enter-active,
.expand-leave-active {
  transition: all 0.3s ease;
  overflow: hidden;
}

.expand-enter-from,
.expand-leave-to {
  max-height: 0;
  opacity: 0;
  transform: translateY(-10px);
}

.expand-enter-to,
.expand-leave-from {
  max-height: 1000px;
  opacity: 1;
  transform: translateY(0);
}

@keyframes slideInDown {
  from {
    opacity: 0;
    transform: translateY(-20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

// Responsive Design
@media (max-width: 768px) {
  .category-list-container {
    margin: 15px 0;
    border-radius: 12px;
  }

  .filter-header {
    padding: 12px 20px;

    .header-left {
      gap: 10px;

      .filter-title {
        font-size: 1rem;
      }
    }

    .header-right {
      gap: 8px;

      .clear-all-btn,
      .expand-btn {
        padding: 3px 8px;
        font-size: 0.75rem;
      }
    }
  }

  .collapsed-filters,
  .category-list-box {
    padding: 15px 20px;
  }

  .filter-content {
    gap: 6px;
  }

  .filter-tag {
    padding: 5px 10px;
    font-size: 0.8rem;
  }
}

@media (max-width: 480px) {
  .filter-header {
    flex-direction: column;
    gap: 10px;
    text-align: center;

    .header-right {
      width: 100%;
      justify-content: center;
    }
  }

  .collapsed-filters .active-filter-tags {
    justify-content: center;
  }
}
</style>